<template>
  <n-config-provider :theme-overrides="naiveTheme">
    <n-modal :show="show" :on-update:show="(value) => $emit('update:show', value)">
      <n-card style="width: 70vw" :title="title" :bordered="false"
              size="huge" role="dialog" aria-modal="true"
      >
        <template #header-extra>
          <n-icon size="25" color="#888888" class="cursor-pointer" @click="() => $emit('update:show', false)"><Close /></n-icon>
        </template>

        <n-scrollbar style="max-height: 80vh;" class="w-full">
          <template v-for="item in fields">
            <div v-if="item.type == 'input'" class="mb-3">
              <div class="text-base pb-2">{{ item.title }}</div>
              <n-input v-model:value="form[item.key]" :placeholder="item.placeholder" />
            </div>
            <div v-if="item.type == 'number'" class="mb-3">
              <div class="text-base pb-2">{{ item.title }}</div>
              <n-input-number v-model:value="form[item.key]" :placeholder="item.placeholder" />
            </div>
            <div v-if="item.type == 'select'" class="mb-3">
              <div class="text-base pb-2">{{ item.title }}</div>
              <n-select v-model:value="form[item.key]" :options="options[item.key]" :placeholder="item.placeholder" />
            </div>
            <div v-if="item.type == 'textarea'" class="mb-3">
              <div class="text-base pb-2">{{ item.title }}</div>
              <n-input v-model:value="form[item.key]" :rows="10" :placeholder="item.placeholder" type="textarea" />
            </div>
          </template>
        </n-scrollbar>

        <template #footer>
          <div class="flex w-full justify-end">
            <n-button size="large" @click="() => $emit('update:show', false)">取消</n-button>
            <n-button size="large" class="ml-3" type="primary" @click="confirm">{{ confirmText }}</n-button>
          </div>
        </template>
      </n-card>
    </n-modal>
  </n-config-provider>
</template>

<script lang="ts">
const itemTypeSet = [ 'input', 'select', 'number', 'textarea' ] as const
export type ItemType = typeof itemTypeSet[number]

export interface Item {
  title: string,
  placeholder: string,
  key: string,
  type: ItemType,
  options?: string | Array<{ label: string, value: string }>,
  value?: any
}
export default {}
</script>

<script lang="ts" setup>
import { reactive, onMounted, PropType, watch } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { Close } from '@vicons/ionicons5'
import {
  NModal, NButton, NConfigProvider, NCard,
  NInput, NIcon, NInputNumber, NSelect, NScrollbar
} from 'naive-ui'
import { reqPure } from '../../shared/request/request'
import { axiosReq } from '../../shared/client/axios'

const form = reactive<any>({})
const options = reactive<any>({})

const props = defineProps({
  show: Boolean,

  title: {
    type: String,
    required: true
  },

  onConfirm: {
    type: Function,
    required: true,
    default: () => null
  },

  confirmText: {
    type: String,
    required: false,
    default: () => '确认'
  },

  fields: {
    type: Array as PropType<Item[]>,
    required: false,
    default: () => []
  }
})

const emits = defineEmits(['update:show'])

function confirm() {
  props.onConfirm(form)
  emits('update:show', false)
}

watch(props.fields, (o, n) => {
  for (const x of props.fields) {
    if (x.value) form[x.key] = x.value
  }
})

onMounted(async () => {
  for (const x of props.fields) {
    if (x.value) form[x.key] = x.value
    if (x.type !== 'select') continue
    if (Array.isArray(x?.options)) {
      options[x.key] = x.options
      continue
    }
    if (x?.options) {
      options[x.key] = x?.options ? await reqPure(axiosReq, x.options) : []
    }
  }
})

</script>

<style>
</style>
